import navIcon from '../assets/moduleIcon/nav.png'
import slideShowIcon from '../assets/moduleIcon/slideShow.png'
import util from '../util/util'
import defaultImg from '../assets/imgs/defImg.jpg'

// 主题色
const themeColor = '#718093'
// 模块的基本结构和属性说明
const moduleAttr = {
    name: '模块名称',   //模块名称
    id: 1,  //模块标识
    icon: '',   //模块图标
    attrs: {   //用于自定义的数据 
        index: 1    //模块在页面的排序
    },
    list: [],    //模块内容列表
    max: 48 //列表最大项数
}

// 模块基本属性
const baseAttr = {
    marginTop: true,    //是否开启模块上外边距， 默认开启10px
    fullWidth: false,   //是否使用全屏宽度，false则会开启10px的左右外边距 默认false
    radius: 0,  //模块圆角, 范围0-20px, 若设为false，则不解析该属性
    bgType: 1,  //背景类型  1.默认, 2.隐藏, 3.自定义
    bgStyle: 1,  //背景样式  1.颜色填充, 2.图片
    bgColor: '#fff', //背景颜色, 默认白色
    bgImg: '',  //背景图片, 默认无
    index: 0,   //索引
    fixed: false    //是否固定模块
}

// 控件基本属性
const controlAttr = {
    bgType: 1,  //背景类型  1.默认, 2.隐藏, 3.自定义
    bgStyle: 1,  //背景样式  1.颜色填充, 2.图片
    bgColor: themeColor, //背景颜色, 默认白色
    bgImg: '',  //背景图片, 默认无
    radius: 0,  //控件圆角, 范围0-20px, 若设为false，则不解析该属性
    show: true    //是否展示控件
}

//文字基本属性
const textAttr = {
    customer: false,  //是否使用自定义文字样式, false.默认, true.自定义
    fontColor: '#333',  //文字颜色
    fontSize: 11, //文字大小
    text: '',   //文字内容
    name: '',  //文字所属的功能名称
    show: true, //文字的显示与隐藏
    warp: false,    //是否换行
    b: false,   //是否加粗
    i: false,    //是否斜体
    u: false    //是否开启下划线
}

//图片基本属性
const imgAttr = {
    imgType: 1, //图片类型  1.默认, 2.隐藏, 3.自定义
    url: '',//图片路径
    radius: 2,  //图片圆角, 默认2px
}

// 路径跳转基本属性
const linkAttr = {
    skip: false,    //是否开启跳转
    type: 1,    //跳转类型, 1.普通页面跳转   2.tabbar页面跳转     3.自定义外部跳转链接
    id: '', //跳转携带的id
    name: '',   //跳转目的位置名称
    url: '',    //跳转地址
}

/* ---------------------- 以上内容为基础属性,方便后面定义模块时引用  ----------------------  */

// 图文导航模块每一项的结构模板
const navItem = () => [
    { open: false, id: util.randomString(),  title: { ...textAttr, text: '默认标题', name: '导航标题' }, img: { ...imgAttr }, link: { ...linkAttr } }
]

// 轮播图模块每一项的结构模板
const slideShowItem = () => [
    { open: false, id: util.randomString(),  title: { ...textAttr, text: '默认标题', name: '轮播标题' }, img: { ...imgAttr }, link: { ...linkAttr } }
]

//页面数据
const pageData = [
    /*  模块1, 图文导航 */
    {
        name: '图文导航',
        id: 1,
        icon: navIcon,
        attrs: {
            ...baseAttr,
            radius: 6,
            col: 5, //列数
            row: 2, //行数
            circle: true,   //是否使用圆形图标
            fontColor: '#333',   //字体颜色
            dotColor: themeColor    //分页器激活颜色
        },
        list: [...navItem(), ...navItem(), ...navItem()],
        max: 48
    },
    /*  模块2, 轮播图 */
    {
        name: '轮播图',
        id: 2,
        icon: slideShowIcon,
        attrs: {
            ...baseAttr,
            radius: 6,
            abbr: false,    //3d效果
            autoPlay: true,     //是否自动播放
            paginationStyle: 'dot',    //分页器样式
            dotColor: themeColor,    //分页器激活颜色

        },
        list: [...slideShowItem(), ...slideShowItem(), ...slideShowItem()],
        max: 10
    }
]

// 控件数据,独立文档流
const controlData = [{
    name: '顶部导航',
    type: 1,
    attrs: {
        ...controlAttr,
        radius: false,
        bgColor: "themeColor",
        themeColor: 'themeColor',  //全局主题色
        logo: {
            ...imgAttr,
            url: ''
        },
        inputText: {
            ...textAttr,
            name: '输入框文字',
            text: '输入搜索内容'
        }
    }
},
]

export default {
    pageData, //页面模块数据
    controlData,   //控件数据
    navItem,
    slideShowItem
}